<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/news.css">
    <style>
        html,
        body {
            background-color: rgb(245, 245, 245);
            margin: 0;
        }

        .main {
            padding: 14px;
        }

        .yq {
            width: 100%;
            border-radius: 6px;
        }

        .tab {
            margin-top: 16px;
            background-color: #fff;
            border-radius: 6px;
            padding: 8px;
        }

        .tab .list {
            padding: 8px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
        }

        .tab .list:last-child {
            border-bottom: none;
        }

        .tab .list .left {}

        .tab .list .left .title {
            font-size: 14px;
            margin-bottom: 6px;
        }

        .tab .list .left .title span {
            color: #f40;
            font-size: 12px;
        }

        .tab .list .left .label {
            color: #999;
            font-size: 12px;
        }

        .tab .list .right {
            text-align: center;
            width: 70px;
            border-radius: 13px;
            height: 26px;
            font-size: 13px;
            line-height: 26px;
            border: 1px solid;
            color: #F46CEF;
        }

        .tab .list .right.success {
            color: #ccc;
        }

        .signmodal {
            z-index: 999;
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.205);
        }

        .signmodal .signbg {
            width: 90vw;
            height: 122vw;
            position: fixed;
            left: 5vw;
            top: calc(50vh - 61vw);
        }

        .signmodal .signbg img {
            width: 100%;
        }

        .signmodal .signbg img.successbg {
            width: 90%;
            margin-left: 5%;
            margin-top: 6%;
        }

        .signmodal .signmain {
            width: 76%;
            position: absolute;
            height: 68%;
            top: 30%;
            left: 12%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .signmodal .signmain .tip {
            font-size: 10px;
            text-align: center;
            padding: 6px 0;
        }

        .signmodal .signmain .list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .signmodal .signmain .list .item {
            width: 23%;
            margin-bottom: 8px;
        }

        .signmodal .signmain .list .item:nth-child(7) {
            width: 48.666666666%;
        }

        .signmodal .signmain .list .item .top {
            width: 100%;
            height: 56px;
            background-color: rgba(104, 129, 255, 0.062);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
        }

        .signmodal .signmain .list .item.active .top {
            border: 1px solid #F46CEF;
            background-color: rgba(104, 129, 255, 0.295);
            box-sizing: border-box;
        }

        .signmodal .signmain .list .item .top img {
            margin-bottom: 6px;
            width: 25px;
            height: 21px;
        }

        .signmodal .signmain .list .item .top .desc {
            font-size: 10px;
            color: #F46CEF;
        }

        .signmodal .signmain .list .item .day {
            text-align: center;
            font-size: 12px;
            margin-top: 8px;
        }

        .signmodal .signmain .btn {
            text-align: center;
            height: 32px;
            line-height: 32px;
            box-sizing: border-box;
            margin: 6px 0;
            font-size: 14px;
            border-radius: 30px;
            color: #fff;
            background: linear-gradient(to right, rgb(93, 161, 255), rgb(249, 61, 255));
        }

        .signmodal .signmain .btn.plain {
            background: transparent;
            border: 1px solid #F46CEF;
            color: #F46CEF;
        }

        .signmodal .signmain .btn.signed {
            background: #ccc;
        }

        .signmodal .signmain .tips {
            font-size: 10px;
            text-align: center;
            color: #999;
        }

        .signmodal .signmain.successbg {
            width: 60%;
            left: 20%;
        }

        .signmodal .signmain.successbg .content {
            text-align: center;
        }

        .signmodal .signmain.successbg .content img {
            width: 66px;
            height: 56px;
        }

        .signmodal .signmain.successbg .content .signtext {
            width: 70%;
            margin-left: 15%;
            font-size: 14px;
            line-height: 1.8;
        }

        .signmodal .signmain.successbg .content .signtext span {
            color: #F46CEF;
        }

        .signmodal .signmain.successbg .content .tip {
            font-size: 13px;
            color: #666;
        }

        .head {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="main" id="view" v-cloak>
        <div class="signmodal">
            <div class="signbg">
                <img src="../../image/bg_sign_in.png" alt="">
                <div class="signmain">
                    <div class="tip">可喜可贺！您已连续签到0天啦！</div>
                    <div class="list">
                        <div class="item" :class="{active:item==1}" v-for="item in 7">
                            <div class="top">
                                <img src="../../image/icon_ranking_diamon.png" alt="">
                                <div class="desc">金币+10</div>
                            </div>
                            <div class="day">
                                第{{item}}天
                            </div>
                        </div>
                    </div>
                    <div class="btn" @click="sign" v-if="!todaysign">签到</div>
                    <div class="btn signed" v-else>今日已签到</div>
                    <div class="tips">连续签到奖励更多，中断需要重新累计哦</div>
                </div>
            </div>
            <div class="signbg" v-else @click.stop>
                <img class="successbg" src="../../image/bg_sign_succeed.png" alt="">
                <div class="signmain successbg">
                    <div class="content">
                        <img src="../../image/icon_ranking_diamon.png" alt="">
                        <div class="signtext">当前已连续签到1天获得<span>10金币</span></div>
                        <div class="tip">今日24点前邀请好友成功注册，10金币双倍奖励</div>
                    </div>
                    <div class="btns">
                        <div class="btn" onclick="yq()">邀请好友领福利</div>
                        <div class="btn plain" @click="closemodal">开心收下</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            ios: 1, // 1上架 0非上架

            signmodal: false,
            signsuccess: false,
            todaysign: false
        },
        methods: {
            openTask: function (id) {
                openTask(id)
            },
            // 跳转
            _url: function (param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg: function (url) {
                return returnImg(url);
            },
            SignShow() {
                this.signmodal = true
            },
            sign() {
                this.signsuccess = true
                this.todaysign = true
            },
            closemodal() {
                this.signmodal = false
                this.signsuccess = false
            }
        }
    })

    apiready = function () {

    }
</script>

</html>